<!DOCTYPE html>
<html>
<head>
  <title>test</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0}
input{width: 20px;text-align: center;}
.login{background: #fff;border: 1px solid #000;position: absolute;z-index: 2;}
.title{height: 30px;background: rgba(50,50,50,0.3);line-height: 30px;text-align: center;}
.close{padding:0 10px;background:  rgba(250,250,250,0.4);float: right;cursor: pointer;}
#mask{background: rgba(50,50,50,0.7);position: absolute;left: 0;top: 0;z-index: 1;}
</style>
<script type="text/javascript">
window.onload=function(){
	var aBtn = document.getElementsByTagName('input');
	aBtn[0].onclick = function(){
		//创建一个对象
		var login1 = new Dialog();
		//对象初始化
		login1.init({//传入配置参数
			iNow : 0,
			title : '登录'
		});
	}
	//使用配置参数
	aBtn[1].onclick = function(){
		//创建一个对象
		var login1 = new Dialog();
		//对象初始化
		login1.init({	//传入配置参数
			iNow : 1,
			width : 200,
			height :300,
			dir: 'right',
			title : '公告'
		});
	}
	aBtn[2].onclick = function(){
		//创建一个对象
		var login1 = new Dialog();
		//对象初始化
		login1.init({	//传入配置参数
			iNow : 2,
			mask : true
		});
	}
}
//构造函数
function Dialog(){
	//添加一个属性
	this.oLogin = null;
	this.settings = {	//默认参数
		width : 300,
		height : 300,
		dir : 'center',
		title : '',
		mask : false
	}
}
Dialog.prototype.json = {};
//创建原型函数 opt是要传入的配置参数{josn}
Dialog.prototype.init = function(opt){
	//使用配置参数，如果配置参数没有属性则使用默认参数
	extend(this.settings,opt)
	if( this.json[opt.iNow] == undefined ){
		this.json[opt.iNow] = true;
	}
	if(this.json[opt.iNow]){
		this.create();
		this.fnClose();
		if(this.settings.mask){
			this.createMask();
		}
		this.json[opt.iNow] = false;
	}
}
//创建弹窗的函数
Dialog.prototype.create = function(){
	this.oLogin = document.createElement('div');
	this.oLogin.className = 'login';
	this.oLogin.innerHTML = '<div class="title"><span>' + this.settings.title + '</span><span class="close">x</span></div><div class="content"></div>';
	document.body.appendChild(this.oLogin);
	this.setData();
}
//写一个方法设置数据
Dialog.prototype.setData = function(){
	this.oLogin.style.width = this.settings.width + 'px';
	this.oLogin.style.height = this.settings.height + 'px';
	if( this.settings.dir == 'center'){
		this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) / 2 + 'px';
		this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) / 2 + 'px';
	}else if(this.settings.dir == 'right'){
		this.oLogin.style.left = viewWidth() - this.oLogin.offsetWidth + 'px';
		this.oLogin.style.top = viewHeight() - this.oLogin.offsetHeight + 'px';
	}
} 
//写一个关闭弹窗的方法
Dialog.prototype.fnClose = function(){
	var oClose = this.oLogin.getElementsByTagName('span')[1];
	var This = this;
	oClose.onclick = function(){
		document.body.removeChild(This.oLogin);
		if (This.settings.mask) {
			document.body.removeChild(This.oMask);
		};
		This.json[This.settings.iNow] = true;
	}
}
//写一个遮罩的方法
Dialog.prototype.createMask = function(){
	var oMask = document.createElement('div');
	oMask.id = 'mask';
	document.body.appendChild(oMask);
	this.oMask = oMask;
	oMask.style.width = viewWidth() + 'px';
	oMask.style.height = viewHeight() + 'px';
}
//将obj2的属性赋值给obj1
function extend(obj1,obj2){
	for(attr in obj2){
		obj1[attr] = obj2[attr];
	}
}
//获取可视区的宽高
function viewWidth(){
	return document.documentElement.clientWidth;
}
function viewHeight(){
	return document.documentElement.clientHeight;
}
</script>
</head>
<body>
	<input type="button" value='1'>
	<input type="button" value='2'>
	<input type="button" value='3'>
	<!-- <div class="login">
		<div class="title">
			<span>标题</span><span class="close">x</span>
		</div>
		<div class="content"></div>
	</div> -->
	<!-- <div id="mask"></div> -->
</body>
</html>